<template>
  <view>
    <u-sticky>
      <TopTabs
        :list-data="statusList"
        key-name="name"
        :current.sync="current"
        @tabClick="statusClick"
      />
    </u-sticky>
    <basePage :page-params="pageParams">
      <view
        v-for="(item, index) in recordsList"
        :key="index"
        class="list-bg"
      >
        <view class="record-info-box">
          <view class="title">{{ item.detailedText }}</view>
          <view
            v-if="item.updateType"
            class="growth-info-val"
            :class="item.updateType ==20 ? 'minus-num' : 'plus-num'"
          >
            {{ item.updateType ==10?'+'+item.updateNum :'-'+item.updateNum }}
          </view>
          <view
            v-else
            class="growth-info-val"
            :class="Number(item.priceNumer) > 0 ? 'plus-num' : 'minus-num'"
          >
            {{ item.priceNumer }}
          </view>
        </view>
        <view class="time">{{ item.createTime }}</view>
      </view>
      <view class="u-p-b-40">
        <u-loadmore :status="status" />
      </view>
    </basePage>
  </view>
</template>

<script>
import TopTabs from '@/components/top-tabs'
import basePage from '@/components/base-page'
import { setPageParamsFn } from '@/common/common'
import {
  QueryIntegralRecordDetails,
  queryCoinRecord
} from '@/api/yc_userInfo'
const statusList = [
  {
    name: '积分记录',
    code: 0,
  },
  {
    name: '鑫币记录',
    code: 1,
  }
]
export default {
  name: 'PointsRecords',
  components: {
    basePage,
    TopTabs,
  },
  data() {
    return {
      statusList,
      current: 0,
      orderStatus: 0,
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      page: 1,
      pageSize: 11,
      totalPages: 0,
      recordsList: [], //   成长值记录
      status: 'loading',
    }
  },
  onLoad() {
    this.queryGrowthRecodeListFn()
  },
  onReachBottom() {
    if (this.pageParams.state == 'EMPTY') {
      this.page = 1
    } else {
      this.page++
    }
    if (this.page > this.totalPages) {
      this.status = ''
      return
    }
    this.orderStatus == 0 ? this.queryGrowthRecodeListFn() : this.queryCoinRecordFn()
  },
  methods: {
    statusClick(data) {
      setPageParamsFn(this, null)
      this.page = 1
      this.orderStatus = data.code
      this.orderStatus == 0 ? this.queryGrowthRecodeListFn() : this.queryCoinRecordFn()
    },
    queryCoinRecordFn() {
      const params = {
        memberId: this.vuex_memberInfo.memberId,
        nowPage: this.page,
        pageSize: this.pageSize,
      }
      queryCoinRecord(params).then((res) => {
        this.status = ''
        if (Number(res.code) != 0) {
          this.$u.toast(res.msg)
          return
        }
        if (!res.data.data || (this.page == 1 && res.data.length == 0)) {
          setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
          return
        }
        if (res.data.data.length == 0) {
          return
        }
        if (this.page == 1) {
          this.recordsList = res.data.data
        } else {
          this.recordsList.push(...res.data.data)
        }
        this.totalPages = res.data.pageCount
        if (res.data.rowCount <= this.pageSize) {
          this.status = 'nomore'
        }
      })
    },
    async queryGrowthRecodeListFn() {
      this.status = 'loading'
      const params = {
        platForm: 'android', //当前请求平台为：android，ios，pc,h5
        timeType: 1, //（1：近6个月，2：今年，3：上一年）
        integralType: '10,20', //("10,20"：收入、支出，10：收入，20：支出)
        pageNum: this.page,
        pageSize: this.pageSize,
      }
      const res = await QueryIntegralRecordDetails(params)
      this.status = ''
      if (res.errorCode != 0) {
        this.$u.toast(res.msg)
        return
      }
      if (!res.data.recordList.data || (this.page == 1 && res.data.recordList.data.length == 0)) {
        setPageParamsFn(this, 'EMPTY', '矮油，这里空空如也~', false)
        return
      }
      if (res.data.recordList.data.length == 0) {
        return
      }
      if (this.page == 1) {
        this.recordsList = res.data.recordList.data
      } else {
        this.recordsList.push(...res.data.recordList.data)
      }
      this.totalPages = res.data.recordList.pageCount
      if (res.data.recordList.rowCount <= this.pageSize) {
        this.status = 'nomore'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.list-bg{
  .record-info-box{
    padding: 24rpx 0 0 24rpx;
    overflow: hidden;
    font-size: $uni-font-size-base;
    .title{
      width: calc(100% - 180rpx);
      float: left;
    }
    .growth-info-val{
      max-width: 180rpx;
      color: $uni-color-plus;
      text-align: right;
      float: right;
      margin-right: 24rpx;
    }
    .plus-num{
      color: $uni-color-plus;
    }
    .minus-num{
      color: $uni-color-minus;
    }
  }
  .time{
    text-indent: 24rpx;
    height: 64rpx;
    line-height: 64rpx;
    color: $uni-text-color-tips;
    font-size: $uni-font-size-sm;
  }

}
</style>
